<template>
<div class="product-wrap">
    <van-nav-bar class="header fixed" title="秒抢详情" left-text="返回" left-arrow @click-left="navBack" style="z-index: 99" />
    <div class="seckill-swipe">
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
                <!-- {{ image }} -->
                <img style="height: 375px;width: 100%;" v-lazy="image.url" />
            </van-swipe-item>
        </van-swipe>
    </div>
    <div v-if="images.length == 0" style="width: 100px;background-color:#fff;font-size:12px;width: 100%;height:300px;line-height: 300px;">
        <h1 style="text-align:center;">暂无图片</h1>
    </div>

    <div v-if="status !=2 || status !=4" class="clearfix" style="background-color: white;padding: 10px 15px">
        <div class="l">
            {{ statusBtnText }}
        </div>
        <div class="r">
            <van-count-down style="color: red;font-size: 18px" :time="time" :format="'HH:mm:ss'" @finish="initSite" :millisecond="true" />
        </div>
    </div>
    <div class="product-info clearfix">
        <div v-if="goodsInfo" class="l" style="font-size: 16px;font-weighe: 700;">
            {{ goodsInfo.sort_title }}
        </div>
        <div class="like r">
            <div class="item">
                <van-icon name="like-o" /><span>关注</span>
            </div>
        </div>
    </div>
    <div class="title"></div>
    <div v-if="goodsInfo" class="sub-title">
        <p>{{ goodsInfo.title }}</p>
        {{ goodsInfo.coupon_num }}
    </div>
    <van-tabs v-model="active">
        <van-tab title="商品介绍">
            <!-- <div v-if="goodsInfo.remark">
               <div v-html="goodsInfo.remark"></div> -->
            <!-- </div> -->
        </van-tab>
        <van-tab title="产品规格" >
            <van-cell :title="item.title" :value="item.value"  v-for="(item,index) in params" :key="index"/>
        </van-tab>
        <van-tab title="售后保障" style="background-color: white;padding:10px 15px;">
            <van-divider>权利声明</van-divider>
            <p style="display: block;">无忧商城上的所有商品信息、客户评价、商品咨询、网友讨论等内容，是无忧商城重要的经营资源，未经许可，禁止非法转载使用。</p>
            <van-divider>价格声明</van-divider>
            <p>商品促销信息以商品详情页“促销”栏中的信息为准；商品的具体售价以订单结算页价格为准；如您发现活动商品售价或促销信息有异常，建议购买前先联系销售商咨询。</p>
        </van-tab>
    </van-tabs>
    <!-- Start 商店信息 store -->
    <div class="footer fixed" style="z-index: 99">
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" />
            <van-goods-action-button type="danger" text="活动已结束" v-if="status == 0" />
            <van-goods-action-button type="danger" text="立即预约" @click="getCheck" v-if="status == 2 || status == 1" :disabled="status == 1" />
            <van-goods-action-button type="danger" text="立即秒杀" @click="getPay(1)" v-if="status == 3 || status == 4" :disabled="status == 3" />
            <!-- <van-goods-action-button type="danger" text="充值秒抢" @click="getPay(2)" v-if="status == 3 || status == 4" :disabled="status == 3" /> -->
            <!-- :disabled="status" -->
        </van-goods-action>
    </div>
</div>
</template>

<script>
import {
    Dialog,
    Toast,
    Notify
} from 'vant';
import jutils from 'jutils-src'
export default {
    name: "seckillProduct",
    data() {
        return {
            active: 0,
            goodsInfo: null,
            storeInfo: null,
            goodsImages: [],
            images: [],
            status: 1,
            statusBtnText: '',
            time: 1571049000,
            time2: 226254,
            footer_btn1_text: '',
            footer_btn2_text: '',
            params:[]
        };
    },
    watch: {
        demo(val) {
            this.statusBtnText = this.val;
        }
    },
    mounted() {
        this.address();
        this.initSite()
    },
    methods: {
        address(){
            let defaultAddress = this.global.state.defaultAddress;
            if (!defaultAddress) {
            Dialog.alert({
                    title: '提示',
                    message: '你没有填写收货地址,快去填写地址吧!'
                }).then(() => {
                    this.$router.push({
                        name: 'addressAddressList',
                        path: '../addressList',
                        query: {
                            type: 'add'
                        }
                    });
                });
            }
        },
        initSite() {
            let goodsData = this.global.state.seckillGoodsData;
            this.params = JSON.parse(goodsData.good.params);
            let images = JSON.parse(goodsData.good.images);
            let image = [];
            if (images) {
                images.forEach(item => {
                    image.push({
                        'url': item
                    })
                })
                this.images = image;
            }
            this.goodsInfo = goodsData.good;
            let current_time = (new Date()).getTime();
            let start_at = (new Date(this.global.state.seckillGoodsData.start_at.replace(/-/g,'/'))).getTime(); //购买开始时间
            let end_at = (new Date(this.global.state.seckillGoodsData.end_at.replace(/-/g,'/'))).getTime(); //购买结束时间
            let apply_start_at = (new Date(this.global.state.seckillGoodsData.apply_start_at.replace(/-/g,'/'))).getTime(); //预约开始时间
            let apply_end_at = (new Date(this.global.state.seckillGoodsData.apply_end_at.replace(/-/g,'/'))).getTime(); //预约结束时间
            /*   status 0 活动结束    */
            /*   status 1 活动预约未开始  */
            /*   status 2 活动预约进行中    */
            /*   status 3 活动未开始    */
            /*   status 4 活动进行    */
            if (current_time < apply_start_at) {
                this.statusBtnText = '距秒抢预约还剩开始:'
                this.footer_btn1_text = '活动未开始';
                this.footer_btn2_text = '活动未开始';
                this.status = 1;
                this.time = apply_start_at - current_time;
            } else if (current_time < apply_end_at) {
                this.statusBtnText = '活动预约进行中';
                this.status = 2;
                this.time = apply_end_at - current_time;
            } else if (current_time < start_at) {
                this.status = 3;
                this.statusBtnText = '距秒抢开始还剩开始:'
                this.time = start_at - current_time;
            } else if (current_time < end_at) {
                this.status = 4;
                this.statusBtnText = '活动进行中'
                this.time = end_at - current_time;
            } else {
                this.status = 0;
                this.time = 0;
                this.statusBtnText = '活动结束'
            }
            this.goodsInfo = this.global.state.seckillGoodsData.good;
        },
        navBack() {
            this.$router.go(-1);
        },
        getCheck() { //预约  用券秒杀
            let params = {};
            params.token = sessionStorage.getItem("token");
            this.axios.get('/api/store/seckill/check/' + this.global.state.seckillGoodsData.id, {
                params
            }).then(res => {
                Notify({
                    type: 'primary',
                    message: res.data.message,
                    background: '#07c160'
                });
            }).catch(err => {
                if (err.response.data.code == 405 || err.response.data.code == 402 || err.response.data.code == 403 ) { //券不足
                    Dialog.confirm({
                        title: '标题',
                        message: err.response.data.message,
                        confirmButtonText: '去购买',
                    }).then(() => {
                        this.$router.push({path:'../mine/member',query:{type:'check'}})
                    }).catch(() => {
                        // on cancel
                    })
                } else {
                    Notify({
                        type: 'primary',
                        message: err.response.data.message
                    });
                }

            })
        },
        getPay(e) { //充值秒杀
            let params = {};
            params.token = sessionStorage.getItem("token");
            if (e == 1) {
                this.axios.get('/api/store/seckill/check/' + this.global.state.seckillGoodsData.id, {
                    params
                }).then(res => {
                    Notify({
                        type: 'primary',
                        message: res.data.message
                    });
                }).catch(err => {
                    if (err.response.data.code == 405 || err.response.data.code == 402 || err.response.data.code == 403 ) { //券不足
                        Dialog.confirm({
                            title: '提示',
                            message: err.response.data.message,
                            confirmButtonText: '去购买',
                        }).then(() => {
                            this.$router.push('../mine/member')
                        }).catch(() => {
                            // on cancel
                        })
                    } else {
                        
                        Notify({
                            type: 'primary',
                            message: err.response.data.message,
                            background: '#07c160',
                            onClose:()=>{
                                this.$router.go(-1)
                            }
                        });
                    }
                })
            } else {
                Toast('暂未开放');
            }

        },
        getGoodsDate(current_time, end_at) {
            let date3 = end_at - current_time;
            var days = Math.floor(date3 / (24 * 3600 * 1000))

            //计算出小时数
            var leave1 = date3 % (24 * 3600 * 1000)
            var hours = Math.floor(leave1 / (3600 * 1000))
            //计算相差分钟数
            var leave2 = leave1 % (3600 * 1000)
            var minutes = Math.floor(leave2 / (60 * 1000))
            //计算相差秒数
            var leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
            var seconds = Math.round(leave3 / 1000)
            return `${hours}时${minutes}${seconds}`;

        }
    }
};
</script>

<style scoped>
.product-wrap {
    padding-bottom: 50px;
}

.product-wrap .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0
}

.product-wrap .title {
    font-size: 15px;
    font-weight: 600;
    padding: 0 12px;
    background: white;
    box-sizing: border-box;
}

.product-wrap .sub-title {
    font-size: 12px;
    padding: 0 12px;
    background: white;
    box-sizing: border-box;
    color: #999;
    margin-bottom: 5px;
}

.product-wrap .sub-title p {
    padding: 0.25rem 0;
    margin: 0;
}

.product-info {
    box-sizing: border-box;
    padding: 0 0.8571rem;
    background: white;
    line-height: 24px;
}

.product-info .like {
    max-width: 150px;
}

.product-info .msg .price {
    font-size: 24px;
    line-height: 24px;
    color: #ff4240;
}

.product-info .msg .original_price {
    text-decoration: line-through;
    color: #999;
}

.product-info .item {
    text-align: center;
    display: inline;
    margin: 0 5px;
    line-height: 12px;
}

.product-info .item span {
    color: #999;
    font-size: 12px;
}

.product-info .item p {
    margin: 0;
}

.detail_serve_item i {
    color: #ff4240;
}

.evaluate-header {
    background: white;
    padding: 0 12px 5px;
}

.evaluate-header-item {
    margin: 0 10px 10px 0;
    background: #fdf0f0;
    display: inline-block;
    margin: 5px 5px 0 5px;
    padding: 0 10px;
    height: 25px;
    border-radius: 3px;
    line-height: 25px;
    font-size: 10px;
    font-family: -apple-system, Helvetica, sans-serif;
    color: #666;
}

.evaluate-item {
    box-sizing: border-box;
    padding: 0 12px;
    margin: 10px 0 5px;
}

.evaluate-item-header,
.evaluate-item-header .time {
    line-height: 20px;
}

.evaluate-item-header .name,
.evaluate-item-header .i {
    padding-left: 5px;
    vertical-align: 50%;
}

.evaluate-item-header .van-rate {
    padding-left: 5px;
    display: inline-block;
    vertical-align: 50%;
}

.evaluate-item-container p {
    margin: 0;
}

.evaluate-item-container img {
    display: inline-block;
    max-width: 19%;
    margin-right: 1%;
}

.product-wrap .all {
    text-align: center;
}

.product-wrap .all span {
    padding: 2px 10px;
    border-radius: 10px;
    border: 1px solid #666;
    line-height: 14px;
    vertical-align: 70%;
}

.product-wrap .store {
    box-sizing: border-box;
    background: white;
    padding: 5px 12px;
    margin: 5px 0;
}

.store .title {
    padding: 0;
}

.store .name div {
    display: inline-block;
}

.store .info div p {
    margin: .25rem 0;
    text-align: center;
}

.store .info .info p {
    text-align: center;
    font-size: 12px;
}

.store-tool div button {
    display: block;
    width: 98%;
    margin: 0 2%;
}

.seckill-swipe {
    padding-top: 50px;
}
</style>
